<template>
	<view class="grace-padding">
		<!-- 文章详情 start -->
		<view class="grace-h4 grace-blod">{{obj.title}}</view>
		<view class="grace-text-small">{{obj.author}} 发布于 {{obj.create_time_str}}</view>
		
		<view class="detail-button">
		  <button class="mini-btn" type="primary" @click="collect()" size="mini">收藏</button>
		  <button class="mini-btn" type="primary" @click="goWebview()" size="mini">阅读</button>
		  <button class="mini-btn" type="primary" size="mini" @click="downPdf()">下载</button>
		  <button class="mini-btn" type="primary" @click="actionSheetTap()" size="mini">分享</button>
		  <button class="mini-btn" type="primary" size="mini" >邮箱</button>
		</view>
		
		<view class="grace-text" style="margin-top:12upx;">
			<!-- <image :src="obj.cover" mode="widthFix"></image> -->
			<rich-text :nodes="obj.content"></rich-text>
		</view>
		<!-- 文章详情 end-->
		<view class="grace-title" style="margin-top:60upx;">
			<view class="grace-h5 grace-blod">网友评论</view>
		</view>
		<!-- 评论区 start -->
		<view class="grace-comment">
			<view class="" v-for="(value,key) in commentList" :key="key">
				<view class="grace-comment-list">
					<view class="grace-comment-face">
						<image :src="(value.memberAvatarImg==null||value.memberAvatarImg=='')?'../../../static/user.png':serverUrl+value.memberAvatarImg" mode="widthFix"></image>
					</view>
					<view class="grace-comment-body">
						<view class="grace-comment-top">
							<text>{{value.memberName}}</text>
							<text class="grace-iconfont icon-zan"></text>
						</view>
						<view class="grace-comment-date">
							<text>{{value.createTime}}</text>
							<text>{{value.likeCount}}</text>
						</view>
						<view class="grace-comment-content">{{value.content}}</view>
					</view>
				</view>
			</view>


		</view>
		<!-- 评论区 end -->
		<view class="grace-more-bottom">
			<block v-if="showMore">
				<navigator :url="'../comments/comments?id=' + id" class="grace-border">查看全部评论 <text class="grace-iconfont icon-arrow-right"></text></navigator>
			</block>
			<block v-if="commentList.length<1">暂无评论,快来抢沙发吧</block>
		</view>
		<view style="height:100upx;"></view>
		<!-- 评论输入框 -->
		<view class="grace-footer">
			<view class="grace-input">
				<view class="grace-input-icon grace-iconfont icon-write"></view>
				<input type="text" maxlength="150" :value="inputValue" @input="getInput" placeholder="写评论"></input>
			</view>
			<view class="grace-items" style="padding:0 20upx;" @click="saveMyResourceComment">发布</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
		data() {
			return {
				serverUrl: this.serverUrl,
				staticUrl: this.staticUrl,
				obj: {},
				id: "",
				inputValue: "",
				commentList: [],
				showMore: false,
			}
		},
		onLoad(e) {
			//console.log(e)
			this.id = e.id;
			this.getNewsDetail(e.id);
			this.getMyResourceComment(e.id);
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			getNewsDetail(id) {
				var data = {
					id: id,
					showFields: "id;title;cover;content;author;create_time_str",
					username: this.userInfo.username
				};
				uni.request({
					url: this.serverUrl + 'search-api/find',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							//console.log(r.data.data);
							var contentStr = r.data.data.data[0].content[0].replace(/h2/g, "view").replace(/\\/g, "").replace(/<img/g,
									"<img style=\"width:100%; height: auto;\"").replace(/\/upload/g,this.serverUrl+"/upload");
							contentStr = contentStr.replace(/<!--(.*?)-->/g,"");
							this.obj = {
								title: r.data.data.data[0].title,
								author: r.data.data.data[0].author == null ? "" : r.data.data.data[0].author,
								create_time_str: r.data.data.data[0].create_time_str,
								cover: r.data.data.data[0].cover == null ? "../../../static/zhaopian.png" : r.data.data.data[0].cover,
								content: contentStr
							}
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getMyResourceComment(id) {
				var data = {
					resourceId: id,
					pageNumber: 1,
					pageSize: 5,
				};
				uni.request({
					url: this.serverUrl + 'user-api/getMyResourceComment',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						//console.log(r.data.data);
						if (r.data.code == '000000') {
							var len = r.data.data.length;
							if (len > 4) {
								len = 4;
								this.showMore = true;
							}
							for (var i = 0; i < len; i++) {
								var tmpObj = {
									id: r.data.data[i].id,
									resourceId: r.data.data[i].resourceId,
									memberAvatarImg: r.data.data[i].memberAvatarImg,
									content: r.data.data[i].content,
									createTime: r.data.data[i].createTime,
									memberName: r.data.data[i].memberName,
									likeCount: r.data.data[i].likeCount
								};
								this.commentList.push(tmpObj);
							}
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getInput: function(e) {
				this.inputValue = e.target.value;
			},
			saveMyResourceComment() {
				if (this.hasLogin) {
					if (this.inputValue.length > 1) {
						var data = {
							resourceId: this.id,
							username: this.userInfo.username,
							content: this.inputValue,
						};
						uni.request({
							url: this.serverUrl + 'user-api/saveMyResourceComment',
							header: {
								"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
							},
							data: data,
							method: "POST",
							success: (r) => {
								console.log(r);
								if (r.data.code == '000000') {
									uni.showToast({
										title: '发布成功'
									});
									this.inputValue = "";
									this.commentList = [];
									this.getMyResourceComment(this.id);
								} else {
									uni.showToast({
										title: r.data.message
									});
								}
							},
							fail: (data, code) => {
								console.log('fail' + JSON.stringify(data));
							}
						})
					} else {
						uni.showToast({
							title: "请输入评论内容",
							icon: "none"
						});
					}
				} else {
					uni.navigateTo({
						url: "/pages/general/login/login?url=/pages/news/detail/detail&id=" + this.id
					})
				}
			}

		}
	}
</script>

<style>
.detail-button {
	margin-top: 35upx;
	display: flex;
	align-items: flex-end;
}
button[type=primary] {
	background:#417dc9;
	width: 60upx;
	font-size: 28upx;
	box-sizing:inherit;
}
</style>
